<template>
  <div class="preview-panel-container">
    <!-- <el-alert title="点击空白处查看全部 JSON" type="warning" show-icon /> -->
    <div class="preview-panel-content">
      <draggable-form
        v-model="value"
        class="dragger-container__root"
        :select-key="selectKey"
        @value-change="handleValueChange"
        @select-change="handleSelectChange"
      ></draggable-form>
    </div>
  </div>
</template>
<script>
import DraggableForm from "./components/DraggableForm";
export default {
  components: {
    DraggableForm,
  },
  props: {
    selectKey: String,
    value: Object,
  },
  data() {
    return {};
  },
  methods: {
    handleValueChange(data) {
      this.$emit("value-change", data);
    },
    handleSelectChange(value) {
      this.$emit("select-change", value);
    },
  },
};
</script>

<style lang="less" scoped>
.preview-panel-container {
  flex: 3;
  height: 100%;
  padding: 15px;
  background: #f9f9f9;
  .preview-panel-content {
    flex: 1;
    width: 80%;
    height: calc(100% - 36px);
    padding: 15px;
    margin: auto;
  }

  // .preview-panel-wrapper {
  //   display: flex;
  //   flex-direction: column;
  //   align-items: center;
  //   width: 100%;
  //   height: 100%;
  //   background-color: #fff;
  // }
  .dragger-container__root {
    height: 100%;
  }
}
</style>
